<template>
    <div>
        <!-- on-change: 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 -->
        <!-- auto-upload: 是否在选取文件后立即进行上传 -->
        <!-- show-file-list: 是否显示已上传文件列表 -->
        <!-- accept: 接受上传的文件类型 -->
        <el-upload
            class="upload-demo"
            action
            :on-change="onChange"
            accept=".xlsx,.xls"
            :auto-upload="false"
            :show-file-list="false"
        >
            <el-button size="small" type="primary">导入</el-button>
        </el-upload>
        <el-table
        :data="tabledata"
        style="width: 100%">
            <el-table-column
                prop="year"
                label="年份"
                width="180">
            </el-table-column>
            <el-table-column
                prop="number"
                label="数量"
                width="180">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {read, utils} from 'xlsx'
export default {
    data () {
        return {
            tabledata:[]
        }
    },
    methods: {
        // file是当前选择的文件，fileList是所有选择的文件组成的数组
        onChange(file,fileList){
            // 要在这里读取选择的文件 - 将数据放在页面当中以table的形式展示
            // 先读取file的二进制数据信息 - FileReader
            let fileReader = new FileReader()
            // file.raw是文件数据 - 可以读取的文件数据
            fileReader.readAsBinaryString(file.raw)
            // 读取文件是异步在读取 - 我们需要在读取完成后获取读取到的数据
            fileReader.onload = () =>{
                // 获取结果
                let fileData =  fileReader.result
                // 将文件信息使用 xlsx中的read方法 读取为工作簿
                let book = read(fileData,{type:'binary'})
                // console.log(book);
                // 遍历工作簿中的所有工作表
                book.SheetNames.forEach((item, index) => {
                    // 获取对应的工作表内容
                    // console.log(item);
                    // 只处理第一个工作表
                    if(index === 0){
                        // console.log(1);
                        let sheet = book.Sheets[item]
                        // 将工作表内容转成json格式
                        // console.log(sheet);
                        let jsondata = utils.sheet_to_json(sheet)
                        // console.log(jsondata);
                        this.tabledata = jsondata.map(v => {
                        return {
                            year:v['毕业年份'],
                            number:v['毕业人数']
                        }
                    })
                    }
                    
                })

            }
        }
    }
}
</script>

<style>
    
</style>
